<style>
    .table-adminlog tr td {
        word-break: break-all;
    }
</style>
<table class="table table-striped table-adminlog">
    <thead>
    <tr>
        <th width="100">{:__('Title')}</th>
        <th>{:__('Content')}</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>订单号</td>
        <td>{$row.order_no}</td>
    </tr>
    <tr>
        <td>联系人</td>
        <td>{$row.customer_name}</td>
    </tr>
    <tr>
        <td>联系电话</td>
        <td>{$row.customer_phone}</td>
    </tr>
    <tr>
        <td>套餐名称</td>
        <td>{$row.package_name}</td>
    </tr>
    <tr>
        <td>套餐标价</td>
        <td>￥{$row.package_price}</td>
    </tr>
    <tr>
        <td>订单价格</td>
        <td>￥{$row.actual_amount}</td>
    </tr>
    <tr>
        <td>订单状态</td>
        <td>{$row.order_status_text}</td>
    </tr>
    <tr>
        <td>下单时间</td>
        <td>{$row.createtime|datetime}</td>
    </tr>
    <tr>
        <td>支付时间</td>
        <td>{$row.pay_time_text}</td>
    </tr>
    <tr>
        <td>所属社区</td>
        <td>{$row.community.name}</td>
    </tr>
    <tr>
        <td>所属区域</td>
        <td>{$row.community.province} / {$row.community.city} / {$row.community.district}</td>
    </tr>
    </tbody>
</table>
<div>
    {volist name="services" id="vo" }
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" >
                        服务名称：{$vo.service_name}
                    </a>
                </h4>
            </div>
            <div id="panel1" class="panel-collapse collapse in">
                <div class="panel-body">
                    服务次数：{$vo.service_count}
                </div>
            </div>
            <div id="panel2" class="panel-collapse collapse in">
                <div class="panel-body">
                    单词时长：{$vo.service_duration}分钟
                </div>
            </div>
            {if $row.order_status == 1}
            <div id="panel3" class="panel-collapse collapse in">
                <div class="panel-body">
                    过期时长：{$vo.expiretime | datetime}
                </div>
            </div>
            {/if}
        </div>
    {/volist}
</div>
<div class="hide layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
        <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}</button>
    </div>
</div>
<style>
        .preview-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            text-align: center;
        }
        .preview-image {
            max-width: 90%;
            max-height: 90%;
            margin-top: 5%;
        }
        .thumbnail {
            cursor: pointer;
            width: 200px;
            height: auto;
            margin: 10px;
        }
        /* 面板样式 */
        .panel-group .panel {
            border-radius: 0;
            box-shadow: none;
            border-color: #eee;
        }

        .panel-heading {
            padding: 10px 15px;
            background-color: #f9f9f9;
        }

        .panel-title a {
            display: block;
            color: #333;
            text-decoration: none;
        }

        .panel-title a.collapsed .fa-chevron-down {
            transform: rotate(-90deg);
        }

        .panel-title .fa {
            transition: transform 0.3s ease;
        }
    </style>
 <!-- 预览容器 -->
    <div id="previewContainer" class="preview-container" onclick="closePreview()">
        <img id="previewImage" class="preview-image" src="">
    </div>

    <script>
        function previewImage(src) {
            document.getElementById('previewImage').src = src;
            document.getElementById('previewContainer').style.display = 'block';
        }

        function closePreview() {
            document.getElementById('previewContainer').style.display = 'none';
        }
    </script>
